<h1 mat-dialog-title>Configurator for node {{ name }}</h1>

<div class="modal-form-container">
  <div class="content">
    <div class="default-content">
      <mat-card class="matCard">
        <mat-tab-group *ngIf="name">
          <mat-tab label="General settings">
            <br />
            <form [formGroup]="generalSettingsForm">
              <mat-form-field class="form-field">
                <input matInput formControlName="name" type="text" [(ngModel)]="node.name" placeholder="Name" />
              </mat-form-field>

              <mat-form-field class="form-field">
                <input
                  matInput
                  formControlName="startCommand"
                  type="text"
                  [(ngModel)]="node.properties.start_command"
                  placeholder="Start command"
                />
              </mat-form-field>

              <mat-form-field class="form-field">
                <input
                  formControlName="adapter"
                  matInput
                  type="number"
                  [(ngModel)]="node.properties.adapters"
                  placeholder="Adapters"
                />
              </mat-form-field>

              <button mat-button class="form-field" (click)="configureCustomAdapters()">
                Configure custom adapters
              </button>

              <mat-form-field class="select">
                <mat-select
                  [ngModelOptions]="{ standalone: true }"
                  placeholder="Console type"
                  [(ngModel)]="node.console_type"
                >
                  <mat-option *ngFor="let type of consoleTypes" [value]="type">
                    {{ type }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="node.console_auto_start">
                Auto start console
              </mat-checkbox>

              <mat-form-field class="form-field">
                <mat-select
                  [ngModelOptions]="{ standalone: true }"
                  placeholder="VNC console resolution"
                  [(ngModel)]="node.properties.console_resolution"
                >
                  <mat-option *ngFor="let resolution of consoleResolutions" [value]="resolution">
                    {{ resolution }}
                  </mat-option>
                </mat-select>
              </mat-form-field>

              <mat-form-field class="form-field">
                <input
                  formControlName="consoleHttpPort"
                  matInput
                  type="number"
                  [(ngModel)]="node.properties.console_http_port"
                  placeholder="HTTP port in the container"
                />
              </mat-form-field>

              <mat-form-field class="form-field">
                <input
                  matInput
                  formControlName="consoleHttpPath"
                  type="text"
                  [(ngModel)]="node.properties.console_http_path"
                  placeholder="HTTP path"
                />
              </mat-form-field>

              <button mat-button class="form-field" (click)="editNetworkConfiguration()">
                Edit network configuration
              </button>
            </form>
            <h6>Environment</h6>
            <mat-form-field class="form-field">
              <textarea matInput type="text" [(ngModel)]="node.properties.environment"></textarea>
            </mat-form-field>
          </mat-tab>

          <mat-tab label="Advanced">
            <h6>Extra hosts</h6>
            <mat-form-field class="form-field">
              <textarea matInput type="text" [(ngModel)]="node.properties.extra_hosts"></textarea></mat-form-field
            ><br />

            <h6>Additional directories</h6>
            <mat-form-field class="form-field">
              <textarea matInput type="text" [(ngModel)]="additionalDirectories"></textarea>
            </mat-form-field>
          </mat-tab>

          <mat-tab label="Usage">
            <mat-form-field class="form-field">
              <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
            </mat-form-field>
          </mat-tab>
        </mat-tab-group>
      </mat-card>
    </div>
  </div>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>
